<template>
    <div class="model-toolbar">
        <el-radio-group class="model-visual-mode" v-model="visualMode" size="small" @change="onChangeMode">
            <el-radio-button label="连接图" value="graph" />
            <el-radio-button label="嵌套块" value="block" />
        </el-radio-group>
    </div>
    <div class="model-arch">
        <Arch v-if="visualMode == 'graph'" ref="model_arch_graph"></Arch>
        <ModelArch v-if="visualMode == 'block'" ref="model_arch_block"></ModelArch>
    </div>
</template>

<script setup>
import API from '@/js/api';
import { ref, getCurrentInstance, onMounted } from 'vue';
import ModelArch from '../ModelVisual/ModelArch.vue';
import Arch from '../ModelVisual2/Arch.vue';
const { proxy } = getCurrentInstance();
const visualMode = ref('graph');
const modelData = ref(null);

// 定义导出函数、消息
defineExpose({ setRecord });

async function setRecord(record) {
    // console.log(`ModelArchTab setRecord record = `, record);
    proxy.$refs.model_arch_block && proxy.$refs.model_arch_block.setData(null);
    proxy.$refs.model_arch_graph && proxy.$refs.model_arch_graph.setData(null);

    const local_model_id = record.local_model_id;
    const train_cfg = JSON.parse(record.train_cfg);
    const config_name = train_cfg.config_name;
    let result = await API.invoke('GetModelArch', {
        local_model_id,
        config_name
    });
    // console.log(result);
    if (result.code == 0) {
        modelData.value = result.msg;
        proxy.$refs.model_arch_block && proxy.$refs.model_arch_block.setData(modelData.value);
        proxy.$refs.model_arch_graph && proxy.$refs.model_arch_graph.setData(modelData.value);
    }
}

function onChangeMode(mode) {
    if (mode == 'block') {
        proxy.$refs.model_arch_block.setData(modelData.value);
    } else {
        proxy.$refs.model_arch_graph.setData(modelData.value);
    }
}

onMounted(async () => { });
</script>

<style scoped>
.model-toolbar {
    width: 100%;
    height: 30px;
    background-color: rgb(242, 242, 242);
    padding: 2px 5px;
}

.model-arch {
    width: 100%;
    height: calc(100% - 30px);
}
</style>
